<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">/
    <meta name="viewport" content="width=/, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 
         * https://blog.csdn.net/Dwa_ww/article/details/134823965 //获取 DOM 元素的方法
         * 
         * 
         * 
         * 
         * 
         * 
         * 
         * 
         * */

// 原生 JavaScript
// 在原生 JavaScript 中，我们主要使用 document 对象及其相关方法来获取 DOM 元素。

// 通过 ID 获取元素：

const elementById = document.getElementById('myElementId');

// 通过类名获取元素：

const elementsByClass = document.getElementsByClassName('myClassName');

// 通过标签名获取元素：

const elementsByTag = document.getElementsByTagName('div');

// 通过选择器获取元素：

const elementBySelector = document.querySelector('.mySelector');
const elementsBySelectorAll = document.querySelectorAll('.mySelector');

//vue   ref
// https://blog.csdn.net/weixin_38069018/article/details/118309307
//ref属性必须在组件实例化之前设置，因为Vue.js会在模板解析过程中先解析所有的指令和属性，然后再进行实际的DOM渲染和组件实例化。因此，尽管ref属性可以在组件实例化之前设置，但在组件实例化之前，你无法直接访问和操作这些元素或组件。只有在组件实例化之后，Vue.js才会真正地将这些元素或组件渲染并挂载到DOM上，这时你才能通过this.$refs对象来访问和操作它们

// <template>
//   <div ref="myElementRef">This is my element</div>
// </template>

// <script>
// export default {
//   mounted() {
//     const element = this.$refs.myElementRef;
//     // 对元素进行操作
//   },
// };
// 


// <template>
//   <div v-if="showElement" @click="handleClick">Click me</div>
// </template>

// <script>
// export default {
//   data() {
//     return {
//       showElement: true,
//     };
//   },
//   methods: {
//     handleClick() {
//       const element = this.$el.querySelector('div');
//       // 对元素进行操作
//     },
//   },
// };
// </script>



    </script>
</body>
</html>